<template>
  <div class="lookAccount">
    <el-dialog title="帐号详情" :visible.sync="dialogFormVisible" :before-close="close">
      <el-form :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="帐号" :label-width="formLabelWidth">
              <el-input v-model="form.accountName" auto-complete="off" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="form.accountPassword" auto-complete="off" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="昵称" :label-width="formLabelWidth">
              <el-input v-model="form.accountNick" auto-complete="off" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限" :label-width="formLabelWidth">
              <el-select ref="region" v-model="form.accountPower" placeholder="请选择账号权限" disabled class="regionSelect" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述" :label-width="formLabelWidth">
              <el-input v-model="form.accountDescription" type="textarea" placeholder="描述可为空" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="headPortrait" label="头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="/muma/user/avatar"
            :show-file-list="false"
            :disabled="true"
          >
            <img v-if="form.accountImg" :src="form.accountImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    lookStatus: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {
        accountName: '',
        accountDescription: '',
        accountPassword: '',
        accountPower: '',
        accountNick: '',
        accountImg: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '80px'
    }
  },
  watch: {
    lookStatus(newVal) {
      if (newVal) {
        this.form = this.row
        this.dialogFormVisible = newVal
        // this.getInfo()
      }
    }
  },
  methods: {
    close(status) {
      const data = 'look'
      this.dialogFormVisible = false
      this.$emit('closeEdit', data)
    }
    // getInfo() {
    //   this.listLoading = true
    //   lookAccount().then(res => {
    //     const { data } = res
    //     const list = data.list[0]
    //     console.log(data)
    //     this.form.account = list.userName
    //     this.form.pass = list.userPassword
    //     this.form.region = list.power
    //     // this.from.nick = list.nick
    //     this.form.description = list.description
    //     this.imageUrl = list.avatar
    //   })
    //   this.listLoading = false
    // }
  }
}
</script>

<style lang="stylus" scoped>
  .avatar-uploader >>> .el-upload
    border 1px dashed #d9d9d9
    border-radius 6px
    cursor pointer
    position relative
    overflow hidden
  .avatar-uploader >>> .el-upload:hover
    border-color #409EFF
  .lookAccount >>> .regionSelect
    width 100%
.lookAccount
  padding-left 20px
  .avatar-uploader-icon
    font-size 28px
    color #8c939d
    width 178px
    height 178px
    line-height 178px
    text-align center
  .avatar
    width 178px
    height 178px
    display block
</style>

